<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <!--<link rel="stylesheet" href="../layui/css/layui.css" media="all">-->
    <title>实时数据表格</title>
</head>
<body style="min-width: 1200px">
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend></legend>
</fieldset>-->
<form class="layui-form" action="" style="margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">主板编号</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="id">
        </div>
        <label class="layui-form-label">状态信息</label>
        <div class="layui-input-inline">
            <select name="zhuangtai" lay-filter="state">
                <option value="">无</option>
                <option value="1">在线</option>
                <option value="2">不在线</option>
            </select>
        </div>
        <button class="layui-btn">查找</button>
    </div>
</form>
<table id="realTimeData" lay-filter="timeData"></table>

<!--操作列：施工管理-->
<script type="text/html" id="manage">
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="manage">施工管理</button>
</script>
<script th:src="@{/layui/layui.js}"></script>
<!--<script src="../layui/layui.js"></script>-->
<script th:inline="javascript" type="text/javascript">
    var path = [[@{/}]];
    layui.use(['table','form','layer','jquery'],function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        var realData = table.render({
            elem:'#realTimeData'
            ,height:400
            ,url: path+'public/queryShowData' //数据接口
            ,page: true //开启分页
            ,cellMinWidth:90
            ,title:"实时数据"
            ,cols: [
                [
                {field: 'dev_id', title: '主板编号', width:120}
                ,{field: 'channel', title: '通道', width:70}
                ,{field: 'hole_name', title: '孔号', width:70}
                ,{field: 'seg_name', title: '段号', width:70}
                ,{field: 'flow_in', title: '进浆流量', width: 110,templet:function (d) {
                        return d.flow_in+" L/min";
                    }}
                ,{field: 'flow_out', title: '返浆流量', width: 110, sort: true,templet:function (d) {
                        return d.flow_out+" L/min";
                    }}
                ,{field: 'density', title: '密度', width: 110, sort: true,templet:function (d) {
                        return d.density+" g/cm³";
                    }}
                ,{field: 'shift', title: '抬动', width:70}
                ,{field: 'temperature', title: '温度', width: 110, sort: true,templet:function (d) {
                        return d.temperature+" ℃";
                    }}
                ,{field: 'channelStatus', title: '状态信息', width: 100,templet:function (d) {
                        if(1 == d.channelStatus){
                            return "<span style='color: #3ff012'>在线</span>";
                        }else{
                            return "<span style='color: red'>不在线</span>";
                        }
                    }}
                ,{field: 'option', title: '操作',toolbar:"#manage"}
                ]
            ]
            ,done:function (res, curr, count) {
                merge(res, curr, count);
            }
        });

        // 筛选
        form.on('select(state)',function (data) {
            console.log(data.value); //得到被选中的值
        });

        table.on("tool(timeData)",function (obj) {
            var data = obj.data; //获得当前行数据
            if("manage" == obj.event){
                /*var constructionManage = layer.open({
                    type:2,
                    content:path+"public/constructionData?id="+data.dev_id,
                    title:false,
                    area:['100%','100%'],
                    move: false,
                    maxmin:false,
                    resize:false,
                    closeBtn: 0,
                    success:function (layero, index) {
                        curindex = index;
                        var body = layer.getChildFrame('body', index);
                        var channel_input = body.find("#channel_input").val(data.tongdao);
                        if(1 == data.tongdao){
                            var channel = body.find("#channel").text("2");
                        }else{
                            var channel = body.find("#channel").text("1");
                        }
                        body.find("#equip_No").val(data.sid);
                        body.find("#boardNumber").val(data.sid);
                        if(1==data.zhuangtai){
                            body.find("#curState").val("正在记录...");
                            body.find("#curState").css("color","#45f912");
                        }else if(2==data.zhuangtai){
                            body.find("#curState").val("未进行记录");
                            body.find("#curState").css("color","#ff0000");
                        }else{
                            body.find("#curState").val("已暂停记录");
                            body.find("#curState").css("color","#fff000");
                        }
                    },
                    end:function () {
                        window.sessionStorage.removeItem("index1");
                        if(undefined!=window.sessionStorage.getItem("index3")){
                            window.sessionStorage.removeItem("index3");
                        }
                    }
                });
                layer.full(constructionManage);
                window.sessionStorage.setItem("index1",constructionManage);
                $(window).on("resize",function () {
                    var index1 = window.sessionStorage.getItem("index1");
                    if(undefined!=index1){
                        parent.layer.full(index1);
                    }
                });*/
                window.location.href = "/public/constructionData?id="+data.dev_id;
            }
        });

        // 数据合并
        function merge(res, curr, count) {
            var data = res.data;
            var columsName = ['sid','zhuangtai','option'];//需要合并的列名称
            var columsIndex = [0,9,10];//需要合并的列索引值
            for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
            {
                var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i+=2) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(i-1).find("td").eq(columsIndex[k]);//获取相同列的第一列
                    if (data[i][columsName[k]] == data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        console.log(data[i][columsName[k]]);
                        console.log(data[i - 1][columsName[k]]);
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", 2);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    }
                }
            }
        }

        /*$.ajax({
            type:"POST",
            url:path+"public/queryShowData",
            data:{
                page:1,
                limit:10
            },
            success:function (result) {
                console.log(result);
            },
            error:function () {
                console.log("..............");
            }
        });*/


    });
</script>
</body>
</html>